{% extends 'studentes/base.html' %}
{% block students_index %}
    <div class="container">
        <form action="{% url 'students_calGrade' course.id exercise.id %}" method="post">
            {% csrf_token %}
            <div class="col-8 offset-2" style="border: 1px solid #4f4848;border-radius: 15px;
        background-color: rgba(169,162,162,0.05);margin-top: 30px">
                <div style="margin: 30px 30px 30px 30px ">
                    <div class="text-center">
                        <h4 style="">{{ exercise.exercises }}</h4>
                    </div>
                    {#        for 语句#}

                    {% for i in answer %}
                        <h6 class="form-label"><span class="badge rounded-pill bg-success">{{ forloop.counter }}</span>&emsp;{{ i.title }}
                        </h6>

                        <div style="margin-left: 30px;font-size: small">
                            <div class="form-check">
                                <input required="required" class="form-check-input" type="radio" name="{{ i.id }}"
                                       id="flexRadioDefault-a-{{ i.id }}" value="1">
                                <label class="form-check-label w-100" for="flexRadioDefault-a-{{ i.id }}">
                                    A.{{ i.answerA }}
                                </label>
                            </div>
                            <div class="form-check">
                                <input required="required" class="form-check-input" type="radio" name="{{ i.id }}"
                                       id="flexRadioDefault-b-{{ i.id }}" value="2">
                                <label class="form-check-label w-100" for="flexRadioDefault-b-{{ i.id }}">
                                    B.{{ i.answerB }}
                                </label>
                            </div>
                            <div class="form-check">
                                <input required="required" class="form-check-input" type="radio" name="{{ i.id }}"
                                       id="flexRadioDefault-c-{{ i.id }}" value="3">
                                <label class="form-check-label w-100" for="flexRadioDefault-c-{{ i.id }}">
                                    C.{{ i.answerC }}
                                </label>
                            </div>
                            <div class="form-check">
                                <input required="required" class="form-check-input" type="radio" name="{{ i.id }}"
                                       id="flexRadioDefault-d-{{ i.id }}" value="4">
                                <label class="form-check-label w-100" for="flexRadioDefault-d-{{ i.id }}">
                                    D.{{ i.answerD }}
                                </label>
                            </div>

                            <br>
                            {#                            <div class="mb-3">#}
                            {#                                <h6 style="color: #af4b4b">正确答案：#}
                            {#                                    {% if i.correctAnswer == 1 %}#}
                            {#                                        A#}
                            {#                                    {% elif i.correctAnswer == 2 %}#}
                            {#                                        B#}
                            {#                                    {% elif i.correctAnswer == 3 %}#}
                            {#                                        C#}
                            {#                                    {% elif i.correctAnswer == 4 %}#}
                            {#                                        D#}
                            {#                                    {% endif %}#}
                            {#                                </h6>#}
                            {##}
                            {#                            </div>#}
                        </div>

                    {% endfor %}

                </div>
            </div>
            <div class="col-10 text-end" style="margin-top: 30px">
                <button type="button" href="" class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#exampleModal-tijiao" style="width: 120px">提交
                </button>
            </div>
            <!-- Button trigger modal -->


            <!-- Modal -->
            <div class="modal fade" id="exampleModal-tijiao" tabindex="-1" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">温馨提示</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            确定提交“{{ exercise.exercises }}”吗？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确定提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>


{% endblock %}